<template>
  <lay-container class="page-box pa-12">
    <div class="link-warp">
      <lay-icon type="layui-icon-layer" class="link-icon"></lay-icon>
      <div class="link-msg">页面 "{{ state.title }}" 已在新窗口中打开</div>
      <lay-button type="primary"    radius size="md" @click="onGotoFullPage">
        <i class="iconfont icon-lianjie"></i>
        <span>立即前往体验</span>
      </lay-button>
    </div>
  </lay-container>
</template>

<script setup lang="ts">
import {useRoute} from 'vue-router';
import {verifyUrl} from "@/utils/validate";

// 定义变量内容
const route = useRoute();
const state = reactive({
  title: '',
  link: '',
});

// 立即前往
const onGotoFullPage = () => {
  const {origin, pathname} = window.location;
  if (verifyUrl(<string>state.link)) window.open(state.link);
  else window.open(`${origin}${pathname}#${state.link}`);
};
// 监听路由的变化，设置内容
watch(
    () => route.path,
    () => {
      state.title = <string>route.query.title;
      state.link = <string>route.query.link;
    },
    {
      immediate: true,
    }
);
</script>

<style scoped lang="less">
.link-warp {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #fff;
  width: 100%;

  .link-icon {
    position: relative;
    font-size: 100px;
    color: var(--global-primary-color);

    &::after {
      content: '';
      position: absolute;
      left: 50px;
      top: 0;
      width: 15px;
      height: 100px;
      background: linear-gradient(rgba(255, 255, 255, 0.01),
      rgba(255, 255, 255, 0.01),
      rgba(255, 255, 255, 0.01),
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.05),
      rgba(235, 255, 255, 0.5),
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.01),
      rgba(255, 255, 255, 0.01),
      rgba(255, 255, 255, 0.01));
      transform: rotate(-15deg);
      animation: toRight 5s linear infinite;
    }
  }

  .link-msg {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 15px;
    margin-bottom: 30px;
  }
}
</style>
